<template>
	<view class="cont">
		<view class="container">
			<!-- 背景装饰 -->
			<view class="bg-decoration">
				<view class="circle-1"></view>
				<view class="circle-2"></view>
			</view>

			<!-- 右上角多语言切换 -->
			<view class="language-switch" @click="showLanguageSelector = true">
				<uni-icons fontFamily="CustomFont" size="24" color="#FF5402">🌏</uni-icons>
				<view style="width: 240rpx;">
					{{ currentLanguageText }}
				</view>
			</view>

			<!-- Logo和品牌区域 -->
			<view class="brand-section">
				<!-- <view class="logo-container">
				<image src="/static/logo.png" mode="aspectFit" class="logo"></image>
			</view> -->
				<text class="brand-title">{{storeName }}\n(手机服务端)</text>
			</view>

			<!-- 登录表单 -->
			<view class="login-form">
				<view class="input-group">
					<text class="label">{{ $t('login.username') }}</text>
					<view class="input-wrapper">
						<uni-icons type="phone" size="20" color="#FF5402" class="input-icon"></uni-icons>
						<input v-model="username" type="text" :placeholder="$t('login.usernamePlaceholder')"
							class="modern-input" />
					</view>
				</view>

				<view class="input-group">
					<text class="label">{{ $t('login.password') }}</text>
					<view class="input-wrapper">
						<uni-icons type="locked" size="20" color="#FF5402" class="input-icon"></uni-icons>
						<input v-model="password" type="password" :placeholder="$t('login.passwordPlaceholder')"
							class="modern-input" password="true" confirm-type="done" maxlength="20" />
					</view>
				</view>

				<button class="login-btn primary" @click="accountLogin">
					{{ $t('login.submit') }}
				</button>

				<view class="divider">
					<text class="divider-text">{{ $t('login.or') }}</text>
				</view>

				<!-- 微信 支付宝 小程序登录 getPhoneNumber -->
				<view class="wechat-login">
					<button class="wechat-btn" open-type="getUserInfo" @getuserinfo="handleWechatGetUserInfo"
						withCredentials="true">
						{{ $t('login.wechatLogin') }}
					</button>

					<!-- 小程序授权确认弹窗 -->
					<view class="auth-modal-overlay" v-if="showGetPhoneNumberBtn">
						<view class="auth-modal" @tap.stop="">
							<view class="auth-modal-header">
								<!-- <view class="auth-icon-wrapper">
								<image src="/static/wechat.png" mode="aspectFit" class="auth-wechat-icon"></image>
							</view> -->
								<text class="auth-title">{{ $t('login.authorizeTitle') }}</text>
								<text class="auth-subtitle">{{ $t('login.authorizeSubtitle') }}</text>
							</view>

							<view class="auth-modal-footer">
								<view class="auth-btn auth-btn-cancel" @tap="showGetPhoneNumberBtn = false">
									<text class="auth-btn-text">{{ $t('login.cancelAuthorization') }}</text>
								</view>
								<button class="auth-btn auth-btn-confirm" open-type="getPhoneNumber"
									@getphonenumber="handlePlatformPhoneNumber($event,this.compilePlatform)">
									<text class="auth-btn-text">{{ $t('login.confirmAuthorization') }}</text>
								</button>
								<!-- 微信授权获取手机号-->
								<!-- <button v-if="compilePlatform === 'mp-weixin'" class="auth-btn auth-btn-confirm"
								open-type="getPhoneNumber" @getphonenumber="handleWechatAuth" withCredentials="true">
								<text class="auth-btn-text">{{ $t('login.confirmAuthorization') }}</text>
							</button> -->
								<!-- 支付宝授权获取手机号-->
								<!-- <button v-else-if="compilePlatform === 'mp-alipay'" class="auth-btn auth-btn-confirm"
								open-type="getAuthorize" @getauthorize="handleAlipayAuth" @error="handleAlipayAuthError"
								scope="phoneNumber">
								<text class="auth-btn-text">{{ $t('login.confirmAuthorization') }}</text>
							</button> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 语言选择器弹窗 -->
		<language-selector v-if="showLanguageSelector" @close="showLanguageSelector = false"
			@language-change="onLanguageChange"></language-selector>
	</view>
</template>

<script>
	import languageSelector from '../../components/language-selector/language-selector.vue'
	import getLocales from '../../locale/locales.js'
	import {
		rsaEncrypt,
		formatPublicKey
	} from '../../utils/rsautil.js'
	export default {
		components: {
			languageSelector
		},
		data() {
			return {
				showLanguageSelector: false,
				currentLanguage: uni.getLocale(), // 初始值为当前语言
				pkey: '',
				username: '',
				password: '',
				storeName: 'xxxx游乐园店',
				appId: '',
				merchantNo: '',
				code: '', //微信授权登录凭证
				showGetPhoneNumberBtn: false,
				compilePlatform: '',
				isLoading: false,
				userInfo: null,
				loginChannel: 'MINI_PROGRAM', //登录渠道 小程序：MINI_PROGRAM  H5：Mobile
			}
		},
		computed: {
			locales() {
				// 多语言选项，text通过$t函数获取翻译
				return getLocales(this.$t)
			},
			// 根据currentLanguage获取对应的显示文本
			currentLanguageText() {
				const currentLang = this.locales.find(item => item.value === this.currentLanguage);
				console.log('currentLang:'+currentLang.text)
				return currentLang ? currentLang.text : this.currentLanguage;
			}
		},
		onShow() {
			// 页面显示时检查语言是否发生变化
			const storedLanguage = uni.getStorageSync('currentLanguage');
			const systemLanguage = uni.getLocale();
			const currentLanguage = storedLanguage || systemLanguage || 'en';
			if (currentLanguage !== this.currentLanguage) {
				console.log('检测到语言变化，从', this.currentLanguage, '切换到', currentLanguage);
				this.currentLanguage = currentLanguage;
				// 应用i18n语言设置
				if (this.$i18n) {
					this.$i18n.locale = currentLanguage;
				}
			}
		},
		mounted() {
			this.checkPlatform();
			// 获取当前小程序的APPID（仅在小程序环境下执行）
			// #ifdef MP-WEIXIN || MP-ALIPAY
			this.loginChannel = 'MINI_PROGRAM' //设置登录渠道为小程序
			try {
				const accountInfo = uni.getAccountInfoSync();
				this.appId = accountInfo.miniProgram.appId;
				console.log('当前小程序APPID:', this.appId)
			} catch (error) {
				console.error('获取APPID失败:', error);
			}
			this.getMerchantName({
				appId: this.appId,
			})
			// #endif

			// #ifdef H5
			this.loginChannel = 'MINI_PROGRAM' //设置登录渠道为手机，临时测试MINI_PROGRAM，使用MOBILE
			try {
				console.log('执行H5平台代码');
				this.merchantNo = "MCHT2025070210513343320";
				this.getMerchantName({
					merchantNo: this.merchantNo,
				});
			} catch (h5Error) {
				console.error('执行H5平台代码时出错:', h5Error);
			}
			// #endif

			this.getPk()
		},
		methods: {
			// 处理语言切换事件
			onLanguageChange(language) {
				console.log('当前选择的语言：', language);
				// 更新当前语言状态
				this.currentLanguage = language;
				// 应用i18n语言设置（如果应用使用了i18n）
				if (this.$i18n) {
					this.$i18n.locale = language;
				}
				// 强制更新页面以应用新的语言设置
				this.$forceUpdate();
			},
			// 统一平台检测方法，优化代码结构
			checkPlatform() {
				// 编译时环境变量（最核心的判断依据）
				const compilePlatform = process.env.VUE_APP_PLATFORM;
				this.compilePlatform = compilePlatform;
				console.log("this.compilePlatform", this.compilePlatform)

				// 设置平台标志变量，便于后续使用
				// this.isH5 = compilePlatform === 'h5';
				// this.isWechatApplet = compilePlatform === 'mp-weixin';
				// this.isAlipayApplet = compilePlatform === 'mp-alipay';

			},
			//手机验证码登录
			mobileCodeLogin() {
				uni.navigateTo({
					url: `/pages/login/mobile-login?merchantNo=${this.merchantNo}`
				})
			},
			// 账号密码登录
			accountLogin() {
				if (!this.username || !this.password) {
					uni.showToast({
						title: this.$t('login.emptyTips'),
						icon: 'none'
					})
					return
				}

				const pwd = rsaEncrypt(this.pkey, this.password)
				this.login({
					userName: this.username,
					password: pwd,
					loginMethod: 'PASSWORD',
					businessTerminal: 'MOBILE_SERVICE',
					loginChannel: this.loginChannel
				})
			},
			/**
			 * 处理微信小程序用户信息授权
			 */
			async handleWechatGetUserInfo(e) {
				console.log('handleGetUserInfo触发:', e.detail)
				// 显示加载提示
				uni.showLoading({
					title: this.$t('login.loginLoading'),
					mask: true
				})
				// 用户拒绝授权
				if (!e.detail.userInfo) {
					uni.showToast({
						title: this.$t('login.authorizationFailed'),
						icon: 'none',
						duration: 2000
					});
					uni.hideLoading()
					return;
				}

				this.userInfo = e.detail.userInfo;

				try {
					// 获取登录凭证code
					// 1. 获取临时登录凭证 code
					const loginRes = await uni.login();
					// 检查是否获取成功
					if (loginRes.errMsg !== 'login:ok') {
						throw new Error(this.$t('login.getLoginCodeFailed'));
					}
					const {
						code
					} = loginRes;
					console.log('获取到的临时登录凭证 code:', code);

					this.login({
						appid: this.appId,
						code: code,
						loginMethod: 'WECHAT_OAUTH'
					}, true)

				} catch (error) {
					console.error('登录失败:', error);
					uni.showToast({
						title: this.$t('login.loginTryAgain'),
						icon: 'none',
						duration: 2000
					});
				}
			},
			// 支付宝用户信息授权
			async handleAlipayUserInfo() {
				console.log('handleAlipayUserInfo触发')
				// 显示加载提示
				uni.showLoading({
					title: this.$t('login.loginLoading'),
					mask: true
				})

				try {
					// 获取用户信息
					const userInfoRes = await uni.getUserInfo();
					console.log('获取到的支付宝用户信息:', userInfoRes)

					if (userInfoRes.errMsg !== 'getUserInfo:ok') {
						uni.showToast({
							title: this.$t('login.getUserInfoFailed'),
							icon: 'none',
							duration: 2000
						});
						uni.hideLoading()
						return;
						// throw new Error(this.$t('login.getUserInfoFailed'));
					}

					this.userInfo = userInfoRes.userInfo;

					// 获取登录凭证code
					const loginRes = await uni.login();

					// 检查是否获取成功
					if (loginRes.errMsg !== 'login:ok') {
						uni.showToast({
							title: this.$t('login.getLoginCodeFailed'),
							icon: 'none',
							duration: 2000
						});
						uni.hideLoading()
						return;
						// throw new Error(this.$t('login.getLoginCodeFailed'));
					}

					const {
						code
					} = loginRes;
					console.log('获取到的支付宝临时登录凭证 code:', code);

					this.login({
						appid: this.appId,
						code: code,
						loginMethod: 'ALIPAY_OAUTH'
					}, true)
				} catch (error) {
					console.error('支付宝登录流程失败:', error);
					uni.showToast({
						title: error.message,
						icon: 'none',
						duration: 2000
					});
				} finally {
					uni.hideLoading();
				}
			},

			// 支付宝用户授权错误处理
			handleAlipayAuthError() {
				console.log('支付宝授权被拒绝');
				uni.showToast({
					title: this.$t('login.authorizationDenied') || this.$t('login.authorizationFailed'),
					icon: 'none',
					duration: 2000
				});
			},
			// 通用平台手机号授权登录方法，替代handleGetPhoneNumber和handleAlipayGetPhoneNumber
			handlePlatformPhoneNumber(e, platform = 'mp-weixin') {
				console.log(`${platform}GetPhoneNumber触发:`, e.detail)
				this.showGetPhoneNumberBtn = false
				// 检查用户是否允许授权
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					uni.showLoading({
						title: this.$t('login.loginLoading'),
						mask: true
					})

					// 添加超时保护
					const timeoutPromise = new Promise((_, reject) => {
						setTimeout(() => reject(new Error(this.$t('login.networkTimeout'))), 10000)
					})

					const loginPromise = new Promise((resolve, reject) => {
						uni.login({
							provider: platform === 'mp-weixin' ? 'weixin' : 'alipay',
							success: resolve,
							fail: reject
						})
					})

					Promise.race([loginPromise, timeoutPromise])
						.then(loginRes => {
							if (loginRes.code) {
								console.log(`${platform}授权encryptedData：` + e.detail.encryptedData)
								console.log(`${platform}授权iv：` + e.detail.iv)
								console.log(`${platform}授权code：` + loginRes.code)

								// 发送code和手机号加密信息到后端
								this.login({
									appid: this.appId,
									code: loginRes.code,
									encryptedData: e.detail.encryptedData,
									iv: e.detail.iv,
									loginMethod: platform === 'mp-weixin' ? 'WECHAT_OAUTH' : 'ALIPAY_OAUTH'
								})
							} else {
								uni.hideLoading()
								const failTitle = this.$t('login.loginFailed')
								uni.showToast({
									title: failTitle,
									icon: 'none'
								})
							}
						})
						.catch(err => {
							uni.hideLoading()
							console.error(`${platform}登录失败:`, err)
							let errorMsg = this.$t('login.loginFailed')
							if (err.message === '网络超时') {
								errorMsg = this.$t('login.networkTimeoutMessage')
							}

							uni.showToast({
								title: errorMsg,
								icon: 'none',
								duration: 3000
							})

						})
				} else {
					// 用户拒绝授权
					console.log('用户拒绝授权:', e.detail)
					uni.showToast({
						title: this.$t('login.authorizationDenied') || this.$t('login.authorizationCancelled'),
						icon: 'none',
						duration: 2000
					})
				}
			},
			// 登录接口
			async login(data = {}, isCodeLogin = false) {
				try {
					const result = await this.$http.post('/auth/login', data, {
						showLoading: true, // 禁用内部loading，使用统一的loading
						loadingText: this.$t('login.loginLoading'),
						timeout: 15000 // 设置15秒超时
					})
					console.log('登录信息：', result)
					// 登录成功，保存用户信息
					if (result && result.token) {
						this.loginSuccess(result)
					} else {
						throw new Error(this.$t('login.loginDataFormatError'))
					}

				} catch (error) {
					console.error('登录失败:', error)
					// 使用错误对象的message属性
					if (isCodeLogin) {
						this.showGetPhoneNumberBtn = true
					} else {
						uni.showToast({
							title: error.message || this.$t('login.loginTryAgain'),
							icon: 'none',
							duration: 3000
						})
					}
					uni.hideLoading()
				}
			},
			async loginSuccess(result) {
				uni.setStorageSync('token', result.token)
				uni.setStorageSync('memberNo', result.memberNo)
				uni.setStorageSync('roleProperty', result.roleProperty)

				// 显示成功提示

				uni.showToast({
					title: this.$t('login.success'),
					duration: 1000
				})

				// 延迟跳转，确保用户能看到成功提示
				uni.switchTab({
					url: '/pages/tabbar/tabbar_business'
				})
				uni.hideLoading()
			},
			// getMerchantName
			async getMerchantName(data = {}) {
				return
				try {
					const result = await this.$http.post('/auth/getMerchantName', data, {
						showLoading: false, // 禁用内部loading，使用统一的loading
						timeout: 15000 // 设置15秒超时
					})

					this.storeName = result

				} catch (error) {
					uni.showToast({
						title: error.message || this.$t('login.getMerchantNameFailed'),
						icon: 'none',
						duration: 3000
					})

				}
			},
			async getPk() {
				this.pkey = uni.getStorageSync('pkey')
				if (this.pkey) {
					return
				}
				try {
					const result = await this.$http.post('/auth/getPublicKey', {}, {
						showLoading: false, // 禁用内部loading，使用统一的loading
						timeout: 15000 // 设置15秒超时
					})
					uni.setStorageSync('pkey', result)
					this.pkey = result
				} catch (error) {
					uni.showToast({
						title: error.message || this.$t('login.getMerchantNameFailed'),
						icon: 'none',
						duration: 3000
					})

				}
			}
		}
	}
</script>

<style lang="scss">
	.cont {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
	}

	.container {
		position: relative;
		background: linear-gradient(135deg, #fff5f2 0%, #ffffff 100%);
		height: 100%;
		padding: 40rpx;
		overflow: hidden;
	}

	/* 背景装饰 */
	.bg-decoration {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 40%;
		overflow: hidden;
		z-index: 1;
	}

	.circle-1 {
		position: absolute;
		top: -100rpx;
		right: -100rpx;
		width: 400rpx;
		height: 400rpx;
		background: linear-gradient(135deg, #FF5402 0%, #FF6833 100%);
		border-radius: 50%;
		opacity: 0.1;
	}

	.circle-2 {
		position: absolute;
		top: 200rpx;
		left: -150rpx;
		width: 300rpx;
		height: 300rpx;
		background: linear-gradient(135deg, #FF5402 0%, #FF6833 100%);
		border-radius: 50%;
		opacity: 0.08;
	}

	/* 多语言切换样式 */
	.language-switch {
		position: absolute;
		top: 100rpx;
		left: 40rpx;
		z-index: 1000;
		display: flex;
		align-items: center;
		gap: 12rpx;
		background: rgba(255, 255, 255, 0.9);
		padding: 12rpx 20rpx;
		border-radius: 50rpx;
		box-shadow: 0 4rpx 20rpx rgba(255, 84, 2, 0.1);
		backdrop-filter: blur(10rpx);
	}

	/* Logo和品牌区域 */
	.brand-section {
		text-align: center;
		margin-top: 250rpx;
		margin-bottom: 10rpx;
		position: relative;
		z-index: 10;
	}

	.logo-container {
		width: 120rpx;
		height: 120rpx;
		margin: 0 auto 30rpx;
		background: linear-gradient(135deg, #FF5402 0%, #FF6833 100%);
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 30rpx rgba(255, 84, 2, 0.3);
	}

	.logo {
		width: 60rpx;
		height: 60rpx;
		filter: brightness(0) invert(1);
	}

	.brand-title {
		font-size: 44rpx;
		color: #333;
		font-weight: bold;
	}


	/* 登录表单 */
	.login-form {
		position: relative;
		z-index: 10;
		background: white;
		border-radius: 30rpx;
		padding: 60rpx 40rpx;
		box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.1);
		margin-top: 80rpx;
	}

	.input-group {
		margin-bottom: 40rpx;
	}

	.label {
		font-size: 28rpx;
		color: #666;
		font-weight: 500;
		margin-bottom: 16rpx;
		display: block;
	}

	.input-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		border: 2rpx solid #f0f0f0;
		border-radius: 16rpx;
		transition: all 0.3s ease;
		background: #fafafa;
	}

	.input-wrapper:focus-within {
		border-color: #FF5402;
		background: white;
		box-shadow: 0 0 0 4rpx rgba(255, 84, 2, 0.1);
	}

	.input-icon {
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.modern-input {
		flex: 1;
		height: 88rpx;
		border: none;
		background: transparent;
		font-size: 30rpx;
		color: #333;
		padding-right: 20rpx;
	}

	.modern-input::placeholder {
		color: #ccc;
	}

	.login-btn {
		height: 88rpx;
		width: 100%;
		border: none;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 600;
		margin-top: 20rpx;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.login-btn.primary {
		background: linear-gradient(135deg, #FF5402 0%, #FF6833 100%);
		color: white;
		box-shadow: 0 8rpx 30rpx rgba(255, 84, 2, 0.4);
	}

	.login-btn.primary:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 12rpx 40rpx rgba(255, 84, 2, 0.5);
	}

	.login-btn.primary:active {
		transform: translateY(0);
	}

	.login-btn.secondary {
		background: transparent;
		color: #FF5402;
		border: 2rpx solid #FF5402;
		margin-top: 30rpx;
	}

	.login-btn.secondary:hover {
		background: rgba(255, 84, 2, 0.05);
	}

	/* 分隔线 */
	.divider {
		text-align: center;
		margin: 40rpx 0;
		position: relative;
	}

	.divider-text {
		background: white;
		padding: 0 20rpx;
		color: #999;
		font-size: 26rpx;
		position: relative;
		z-index: 1;
	}

	.divider::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 2rpx;
		background: #f0f0f0;
		z-index: 0;
	}

	/* 微信登录 */
	.wechat-login {
		// margin-top: 350rpx;
	}

	.confirm-view {
		background-color: #7e7f95;
		height: 350rpx;
	}

	.confirm-btn {}

	.wechat-btn {
		height: 88rpx;
		width: 100%;
		background: #09bb07;
		box-shadow: 0 8rpx 30rpx rgba(9, 187, 7, 0.3);

		/* #ifdef MP-ALIPAY */
		background: #06B4FD;
		box-shadow: 0 8rpx 30rpx rgba(6, 180, 253, 0.3);
		/* #endif */

		/* 微信绿色 */
		color: white;
		border: none;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20rpx;

		transition: all 0.3s ease;
	}


	.wechat-icon {
		font-size: 32rpx;
		width: 52rpx;
		height: 52rpx;
	}

	/* 底部链接 */
	.footer-links {
		display: flex;
		justify-content: center;
		gap: 30rpx;
		margin-top: 40rpx;
		font-size: 26rpx;
	}

	.link-text {
		color: #FF5402;
		cursor: pointer;
		transition: color 0.3s ease;
	}

	.link-text:hover {
		color: #FF6833;
	}

	.link-text:last-child {
		font-weight: 600;
	}

	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.login-form {
			margin: 20rpx;
			padding: 40rpx 30rpx;
		}

		.brand-section {
			margin-top: 80rpx;
		}
	}

	/* 微信授权确认弹窗样式 */
	.auth-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
		animation: fadeIn 0.3s ease;
	}

	.auth-modal {
		background-color: white;
		border-radius: 24rpx;
		width: 640rpx;
		max-width: 90%;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
		overflow: hidden;
		animation: slideUp 0.3s ease;
	}

	.auth-modal-header {
		padding: 60rpx 40rpx 40rpx;
		text-align: center;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.auth-icon-wrapper {
		width: 120rpx;
		height: 120rpx;
		margin: 0 auto 30rpx;
		background: linear-gradient(135deg, #07C160 0%, #1AAD19 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
	}

	.auth-wechat-icon {
		width: 60rpx;
		height: 60rpx;
		filter: brightness(0) invert(1);
	}

	.auth-title {
		display: block;
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 16rpx;
	}

	.auth-subtitle {
		display: block;
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}

	.auth-modal-footer {
		padding: 40rpx;
		display: flex;
		gap: 24rpx;
	}

	.auth-btn {
		flex: 1;
		height: 88rpx;
		border: none;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		transition: all 0.3s ease;
		cursor: pointer;
	}

	.auth-btn-cancel {
		background-color: #f5f5f5;
		color: #666;
	}


	.auth-btn-confirm {
		/* #ifdef MP-WEIXIN */
		background: linear-gradient(135deg, #07C160 0%, #1AAD19 100%);
		/* #endif */

		/* #ifdef MP-ALIPAY */
		background: linear-gradient(135deg, #06B4FD 0%, #06B4FD 100%);
		/* #endif */

		color: white;
	}

	.auth-btn:active {
		transform: scale(0.98);
	}

	.auth-btn-icon {
		width: 36rpx;
		height: 36rpx;
		filter: brightness(0) invert(1);
	}

	.auth-btn-text {
		font-size: 32rpx;
		font-weight: 500;
	}

	/* 动画效果 */
	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes slideUp {
		from {
			transform: translateY(100rpx);
			opacity: 0;
		}

		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	/* 移除旧的confirm-view样式 */
	.confirm-view {
		display: none;
	}
</style>